{extend name="$LAYOUT_WECHAT_BASE" /}
{block name="title"}{$info['goodsName']} - 商品详情 - {__block__}{/block}
{block name="meta"}
<meta name="description" content="{$info['goodsSeoDesc']}">
<meta name="keywords" content="{$info['goodsSeoKeywords']},{$seoGrouponKeywords}">
{/block}
{block name="css"}
<link rel="stylesheet"  href="__STATIC__/plugins/swiper/swiper.min.css"/>
<link rel="stylesheet"  href="__ROOT__/addons/groupon/view/wechat/index/css/detail.css?v={$v}">
<link rel="stylesheet" href="__STATIC__/plugins/photoswipe/photoswipe.css">
<link rel="stylesheet" href="__STATIC__/plugins/photoswipe/default-skin/default-skin.css">
<link rel="stylesheet" href="{:request()->scheme()}://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<style>
.prism-player .prism-big-play-btn{top:calc(50vw - 32px)!important;left:calc(50vw - 32px)!important;} 
</style>
{/block}
{block name="header"}
	{php}$cartNum = WSTCartNum();{/php}
	<header class="ui-header ui-header-positive wst-header" id="goods-header" style="display:none;">
	    <a href="{:addon_url('groupon://goods/wxlists')}"><i class="ui-icon-return"></i></a>
	    <ul class="ui-tab-nav">
			<div>
				<li class="switch active" onclick="javascript:pageSwitch(this,1);">商品</li>
			</div>
			<div>
				<li class="switch" onclick="javascript:pageSwitch(this,2);">详情</li>
			</div>
			<div>
				<li class="switch" id="appr" onclick="javascript:pageSwitch(this,3);">评价</li>
			</div>
    	</ul>
	    <span class="share" onclick="dialogShare();"></span>
    </header>
{/block}
{block name="footer"}
{if($info)}
    <div class="ui-loading-wrap wst-Load" id="Load">
	    <i class="ui-loading"></i>
	</div>
	<input type="hidden" name="" value="{$info['goodsId']}" id="goodsId" autocomplete="off">
	<input type="hidden" name="" value="{$info['goodsType']}" id="goodsType" autocomplete="off">
    <footer class="ui-footer wst-footer-btns" style="height:0.49rem;" id="footer">
        <div class="wst-toTop" id="toTop">
	  	<i class="wst-toTopimg"><span></span></i>
		</div>
		<div class="ui-row-flex">
			<div class="ui-col wst-go-icon">
				<div class="ui-row-flex" style="height:0.49rem;">
					<div class="ui-col ui-col" >
						<div class="icon">
							{if($info['shop']['shopQQ'])!=''}
							<a class="J_service" href="{:WSTProtocol()}wpa.qq.com/msgrd?v=3&uin={$info['shop']['shopQQ']}&site=qq&menu=yes">
								<span class="img qq"></span><span class="word">客服</span>
							</a>
							{else /}
							<a class="J_service" href="tel:{$info['shop']['shopTel']}">
								<span class="img tel"></span><span class="word">客服</span>
							</a>
							{/if}
							{:hook('wechatDocumentContact',['type'=>'goodsDetail','shopId'=>$info['shop']['shopId'],'goodsId'=>$info['goodsId']])}
						</div>
					</div>
					<div class="ui-col ui-col" >
						<div class="icon"><a href="{:url('wechat/shops/index',['shopId'=>$info['shop']['shopId']])}"><span class="img shop"></span><span class="word">店铺</span></a></div>
					</div>
					<div class="ui-col ui-col" >
						<div class="icon">
							<a href="{:url('wechat/carts/index')}">
								<span class="img cart" style="left:0.1rem"></span>
								<span class="word" style="width:0.4rem">购物车</span>
								{if($cartNum>0)}<span id="cartNum">{php} echo $cartNum;{/php}</span>{/if}
							</a>
						</div>
					</div>
				</div>
			</div>
			<div  class="wst-goods_buy wst-flex-row wst-ac" style="margin:0  0.12rem 0 0.46rem;">
				<button id="buyBtn" class="wst-goods_buym active" type="button" onclick="javascript:cartShow(1);" disabled>立即参团</button>
			</div>
	    </div>
    </footer>
{/if}
{/block}
{block name="main"}
{/* 图片查看层 */}
<div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
        <div class="pswp__top-bar">
            <div class="pswp__counter"></div>
            <button class="pswp__button pswp__button--close" title="关闭"></button>
            <button class="pswp__button pswp__button--fs" title="全屏"></button>
            <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
            <div class="pswp__preloader">
                <div class="pswp__preloader__icn">
                    <div class="pswp__preloader__cut">
                    <div class="pswp__preloader__donut"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
            <div class="pswp__share-tooltip">
            </div>
        </div>
        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
        <div class="pswp__caption">
            <div class="pswp__caption__center">
            </div>
        </div>
        </div>
    </div>
</div>
{if($info)}
	 {/* 商品  */}
	<div class="wst-go-more" id="arrow" style="display: none;"><i class="arrow"></i>
		<ul class="ui-row ui-list-active more">
			<li class="ui-col"><div class="column line"><a href="{:url('wechat/index/index')}"><i class="home"></i><p>首页</p></a></div></li>
			<li class="ui-col"><div class="column line"><a href="{:url('wechat/goodscats/index')}"><i class="category"></i><p>分类</p></a></div></li>
			<li class="ui-col"><div class="column line"><a href="{:url('wechat/carts/index')}"><i class="cart"></i><p>购物车</p></a></div></li>
			<li class="ui-col"><div class="column line"><a href="{:url('wechat/favorites/goods')}"><i class="follow"></i><p>关注</p></a></div></li>
			<li class="ui-col"><div class="column"><a href="{:url('wechat/users/index')}"><i class="user"></i><p>我的</p></a></div></li>
		</ul>
	</div>
	<div class="wst-ca-layer" id="layer" onclick="javascript:inMore();"></div>
     <section class="ui-container"  id="goods1" style="border-top: 0px solid transparent;">
        <div id="groupon-time" sc="{:date("Y-m-d H:i:s")}" sv="{$info['startTime']}" ev="{$info['endTime']}" st="{$info['status']}">
		    <div class="swiper-container">
	          <div class="swiper-wrapper">
	          		{if $info['goodsVideo']!=""}
	          		<div class="swiper-slide" style="width:100%;">
				        <div id='previewVideo' class="wst-video-box"></div>
				    </div>
					{/if}
					{volist name="info['gallery']" id="ga" key="i"}
					{php}$_i = $i-1;{/php}
					<div onclick="gViewImg({$_i})" class="swiper-slide" style="width:100%;">
	                	<div class="wst-go-img"><a><img src="__RESOURCE_PATH__/{:WSTImg($ga,2)}"></a></div>
	                </div>
	                {/volist}
	          </div>
	   		  {if(count($info['gallery'])>1)}<div class="swiper-pagination"></div>{/if}
				<div class="wst-go-return" onclick="history.back()"><i class="ui-icon-prev"></i></div>
				<div class="wst-go-mores" onclick="javascript:inMore()"><i></i></div>
	        </div>
		</div>
		 <div class="groupon-time wst-flex-row wst-jsb wst-ac">
			 <span class="title">团购活动</span><span class="wst-goods-time" id="grouptime">{if $info['status']==-1}团购活动已结束{else}正在计算团购时间...{/if}</span>
		 </div>
		<div class="ui-nowrap-multi ui-whitespace wst-go-name">{if $info['isFreeShipping']==1}<span class='wst-red'>【包邮】</span>{/if}{$info['goodsName']}</div>
		<div class="ui-row-flex wst-go-price">
		    <div class="ui-col ui-col-2">
		    	<p class="price">¥{$info['grouponPrice']}<span class="market">¥{$info['marketPrice']}</span></p>
		    	<p>成交数：{$info['orderNum']}{$info['goodsUnit']}，每人限购{$info['limitNum']}{$info['goodsUnit']}</p>
		    </div>
		</div>
		{if($info['grouponDesc'])}
		<div class="ui-row-flex wst-go-pdesc">
			<div class="ui-col">
				<p>团购说明：{$info['grouponDesc']}</p>
			</div>
		</div>
		{/if}
		{if!empty($info['spec'])}
		<div class="wst-go-spec">
			{volist name="$info['spec']" id="sp"}
			<div class="spec">
				{volist name="sp['list']" id="sp2"}
				{if $sp2['itemImg']!=''}
					<span class="introduce">{$sp['name']}：</span><img class="j-option img active" data-val="{$sp2['itemId']}" src="__RESOURCE_PATH__/{$sp2['itemImg']}" title="{$sp2['itemName']|WSTStripTags}">
				{else}
					<span class="introduce">{$sp['name']}：</span><span class="j-option words active" data-val="{$sp2['itemId']}">{$sp2['itemName']}</span>
				{/if}
				{/volist}
				<div class="wst-clear"></div>
			</div>
			{/volist}
		</div>
		{/if}
		<ul class="ui-list ui-list-text wst-go-ul ui-list-active">
			{if WSTConf('CONF.isOrderScore')==1}
			<li>
				<div class="ui-list-info">
					<h5 class="ui-nowrap"><span class="word">积分</span><span class="line"></span><span class="tips">购买即可获得{php}echo WSTMoneyGiftScore($info['shopPrice']);{/php}积分</span></h5>
				</div>
			</li>
		    {/if}
		    {if !empty($info['attrs']) }
			<li onclick="javascript:dataShow();">
				<div class="ui-list-info">
					<h5 class="ui-nowrap"><span class="word">参数</span></h5>
				</div>
				<span class="icon-right-arrow"></span>
			</li>
		    {/if}
		</ul>

		 <div>
			 <div class="title gc-title" onclick="javascript:pageSwitch($('#appr'),3);">
				 <div class="wst-flex-row wst-jsb wst-ac" style="height:0.54rem;">
					 <p>商品评价(<span>{$info['appraiseNum']}</span>)</p>
					 <div class="wst-flex-row wst-ac">
						 <p class="appraise">查看全部</p>
						 <i class="icon-right-arrow"></i>
					 </div>
				 </div>
				 {if $info['goodsAppr']}
				 <div class="appraise-content">
					 <div class="wst-flex-row wst-ac">
						 <img class="user-photo" src="{$info['goodsAppr']['userPhoto']}" >
						 <div>
							 <p class="login-name">{$info['goodsAppr']['loginName']}</p>
							 <p class="time">{$info['goodsAppr']['createTime']}
								 {volist name="$info['goodsAppr']['goodsSpecNames']" id="sp"}
								 {$sp}
								 {/volist}
							 </p>
						 </div>

					 </div>
					 <div class="content">{$info['goodsAppr']['content']}</div>
					 {if $info['goodsAppr']['images']}
					 <div class="images">
						 {volist name="$info['goodsAppr']['images']" id="vo"}
						 {php}if($key>2)break;{/php}
						 <img src="__RESOURCE_PATH__/{$vo}" >
						 {/volist}
					 </div>
					 {/if}
					 {if $info['goodsAppr']['shopReply']}
					 <div class="reply"><p>卖家回复：<br>{$info['goodsAppr']['shopReply']}</p></div>
					 {/if}
				 </div>
				 {/if}
			 </div>
		 </div>

		 <ul class="ui-list ui-list-one ui-list-link wst-go-shop">
			 <div class="info">
				 <div class="img"><a><img src="__RESOURCE_PATH__/{:WSTImg($info['shop']['shopImg'],3)}" title="{$info['shop']['shopName']|WSTStripTags}"></a></div>
				 <div class="name"><p class="ui-nowrap-flex name1">{$info['shop']['shopName']}</p><p class="ui-nowrap-flex name2"><span>主营: {$info['shop']['cat']}</span></p></div>
				 <div class="wst-clear"></div>
			 </div>
			 <div class="ui-row-flex score">
				 <div class="ui-col ui-col" style="text-align:left;">商品评分: <span class="red">{$info['shop']['scores']['goodsScore']}</span></div><span class="line">|</span>
				 <div class="ui-col ui-col" style="text-align:center;">时效评分: <span class="red">{$info['shop']['scores']['timeScore']}</span></div><span class="line">|</span>
				 <div class="ui-col ui-col" style="text-align:right;">服务评分: <span class="red">{$info['shop']['scores']['serviceScore']}</span></div>
			 </div>
			 <div class="ui-row-flex button">
				 <div class="ui-col ui-col"><a href="{:url('wechat/shops/goods',['shopId'=>$info['shop']['shopId']])}" class="goods">全部商品</a></div>
				 <div class="ui-col ui-col"><a href="{:url('wechat/shops/index',['shopId'=>$info['shop']['shopId']])}" class="shop">进入店铺</a></div>
			 </div>
		 </ul>
		 <div class="wst-shl-ads">
			 <div class="wst-flex-row wst-center">
				 <div class="line"></div>
				 <p class="title">猜你喜欢</p>
				 <div class="line"></div>
			 </div>
			 <div class="wst-guess-goods">
				 {wst:goods type='best' cat="$info['shop']['catId']" num='6'}
				 <div class="wst-go-goods" onclick="javascript:WST.intoGoods({$vo['goodsId']});">
					 <div class="img j-imgAdapt">
						 <a href="javascript:void(0);" onclick="javascript:WST.intoGoods({$vo['goodsId']});"><img src="__RESOURCE_PATH__/{:WSTConf('CONF.goodsLogo')}" data-echo="__RESOURCE_PATH__/{:WSTImg($vo['goodsImg'],3)}" title="{$vo['goodsName']|WSTStripTags}"></a>
					 </div>
					 <p class="name ui-nowrap-multi">{$vo['goodsName']}</p>
					 <div class="info"><span class="ui-nowrap-flex price">¥{$vo['shopPrice']}</span></div>
				 </div>
				 {/wst:goods}
				 <div class="wst-clear"></div>
			 </div>
		 </div>
     </section>
    {/* 详情  */}
	<section class="ui-container" id="goods2" style="margin-bottom:0.6rem;border-top:0;">
		<div class="wst-go-details">{$info['goodsDesc']}</div>
	</section>
    {/* 评价  */}
	<input type="hidden" name="" value="{$info['goodsId']}" id="goodsId" autocomplete="off">
	<input type="hidden" name="" value="" id="evaluateType" autocomplete="off">
	<input type="hidden" name="" value="" id="currPage" autocomplete="off">
	<input type="hidden" name="" value="" id="totalPage" autocomplete="off">
	<section class="ui-container" id="goods3" style="display: none;">
		<div class="ui-row-flex wst-ev-term">
			<div class="ui-col ui-col active" onclick="javascript:evaluateSwitch(this,'');"><p>全部</p><p class="number">{$info['appraises']['sum']}</p></div>
			<div class="ui-col ui-col" onclick="javascript:evaluateSwitch(this,'best');"><p>好评</p><p class="number">{$info['appraises']['best']}</p></div>
			<div class="ui-col ui-col" onclick="javascript:evaluateSwitch(this,'good');"><p>中评</p><p class="number">{$info['appraises']['good']}</p></div>
			<div class="ui-col ui-col" onclick="javascript:evaluateSwitch(this,'bad');"><p>差评</p><p class="number">{$info['appraises']['bad']}</p></div>
			<div class="ui-col ui-col" onclick="javascript:evaluateSwitch(this,'pic');"><p>晒图</p><p class="number">{$info['appraises']['pic']}</p></div>
		</div>
		<div id="evaluate-list"></div>
	</section>
<script id="list" type="text/html">
{{# if(d && d.length>0){ }}
{{# for(var i=0; i<d.length; i++){ }}
	<div class="ui-whitespace wst-go-evaluate">
		<div class="info">
			<p>
				<img src="{{ d[i].userPhoto }}" class="portrait">
			<div class="wst-flex-column">
				<span class="name">{{ d[i].loginName }}</span>
				<span class="time">{{ d[i].createTime }}&nbsp;{{ d[i].goodsSpecNames }}</span>
			</div>
			<div class="wst-clear"></div>
			</p>
		</div>
		<div class="content">
			<p>
				{{# var score = (d[i].goodsScore+d[i].serviceScore+d[i].timeScore)/3; }}
				{{# for(var j=1; j<6; j++){ }}
				{{# if(j <= score.toFixed(0)){ }}
				<i class="bright"></i>
				{{# }else{ }}
				<i class="dark"></i>
				{{# } }}
				{{# } }}
			</p>
			<p class="content2">{{ d[i].content }}</p>
			{{# if(d[i].images){ }}
			{{# for(var m=0; m<d[i].images.length; m++){ }}
			<img src="__RESOURCE_PATH__/{{ d[i].images[m] }}">
			{{# } }}
			{{# } }}
			<div class="wst-clear"></div>
		</div>
		{{# if(d[i].shopReply){ }}
		<div class="reply"><p>卖家回复：<br>{{ d[i].shopReply }}</p></div>
		{{# } }}
	</div>
{{# } }}
{{# }else{ }}
	<div class="wst-prompt-icon" style="width:1.84rem;"><img src="__WECHAT__/img/nothing-evaluate.png" ></div>
	<div class="wst-prompt-info">
		<p>暂无评论</p>
	</div>
{{# } }}
</script>
{else}
 <ul class="ui-row-flex wst-flexslp">
	<li class="ui-col ui-flex ui-flex-pack-center">
	<p>对不起，没有找到商品。</p>
	</li>
</ul>
{/if}
<!--二维码海报-->
<div class="ui-dialog" id="wst-di-qrcod" >
    <div class="ui-dialog-cnt wst-dialog-cnt5" style="width:auto;height:auto;background: none;">
        <div class="wst-dialog-bd">
            <div id="qrcodes" style="width: 3rem;height: 4.96rem;">
            	<div id="shareImg"></div>
            	<div data-role="button" class="close-dialog">
					<img src="__WECHAT__/img/icon-close2.png">
				</div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="include"}
{/* 提示分享对话框 share */}
<div class="ui-dialog" id="wst-di-share" onclick="WST.dialogHide('share');">
     <div class="wst-prompt"></div>
</div>
{if($info)}
{/* 遮盖层  */}
<div class="wst-cover" id="cover"></div>
{/* 参数框  */}
{if !empty($info['attrs']) }
<div class="wst-fr-box" id="frame">
	<div class="title"><span>参数</span><div class="wst-clear"></div></div>
	<div style="overflow-y: scroll;height:3rem;">
		{volist name="$info['attrs']" id="at"}
		<div class="content wst-flex-row" >
			<div class="name">{$at['attrName']}</div><div class="val">{$at['attrVal']}</div>
		</div>
		{/volist}
	</div>
	<div class="determine"><button class="button" onclick="javascript:dataHide();">确定</button></div>
</div>
{/if}
{/*加入购物车框  */}
<div class="wst-cart-box wst-flex-column wst-jsb" id="frame-cart">
	<div class="title">
		<div class="picture"><div class="img"><a href="javascript:void(0);"><img src="__RESOURCE_PATH__/{:WSTImg($info['goodsImg'],3)}" title="{$info['goodsName']|WSTStripTags}" id="specImage"></a></div></div>
		<i class="icon-close" onclick="javascript:cartHide();"></i>
		<p class="ui-nowrap-flex price"><span id="j-shop-price">¥{$info['grouponPrice']}</span><span id="j-market-price" class="price2">¥{$info['marketPrice']}</span></p>
		<div class="wst-clear"></div>
	</div>
	<div class="number wst-flex-row wst-jsb wst-ac">
		<div class="wst-flex-row wst-ac">
			<p style="color:#333;font-weight: bold;">数量</p>
			<div class="stock">库存：<span id="goods-stock">{$info['grouponNum']}</span>{$info['goodsUnit']}</div>
		</div>
		<div class="wst-buy_l wst-flex-row wst-ac">
			<div class="wst-buy-minus" onclick='javascript:WST.changeIptNum(-1,"#buyNum")'></div><input id="buyNum" class="wst-buy_l2" data-min='1' data-max="{$info['canBuyNum']}" type="number" value="1" autocomplete="off" onkeyup='WST.changeIptNum(0,"#buyNum")'><div class="wst-buy-add"  onclick='javascript:WST.changeIptNum(1,"#buyNum")'></div>
		</div>
	</div>
	<button class="button" onclick="javascript:addCart({$info['goodsType']});">确定</button>
</div>
{/block}



{block name="js"}
<script>
{php}
	$gallery = implode(',',$info['gallery']);
{/php}
var goodsInfo = {
	id:{$info['goodsId']},
	grouponId:{$info['grouponId']},
	isSpec:{$info['isSpec']},
	goodsStock:{$info['goodsStock']},
	marketPrice:{$info['marketPrice']},
	goodsPrice:{$info['shopPrice']}
	{if isset($info['saleSpec'])}
	,sku:{:json_encode($info['saleSpec'])}
	{/if}
	,gallery:"{$gallery}"
}
$(function(){
	if(goodsInfo.gallery!=''){
		goodsInfo.gallery = goodsInfo.gallery.split(',').map(function(imgUrl,i){
			imgUrl = WST.conf.RESOURCE_PATH+"/"+imgUrl;
			var _obj = { src:imgUrl, w:WST.pageWidth(), h:100 };
			gGetImgWH(imgUrl,i);
			return _obj;
		})
	}
})

</script>
{/if}
<script type='text/javascript' src='__WECHAT__/js/jquery.min.js'></script>
<script type="text/javascript" charset="utf-8" src="{:request()->scheme()}://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<script type='text/javascript' src='__STATIC__/plugins/swiper/swiper.min.js'></script>
<script type='text/javascript' src='__ROOT__/addons/groupon/view/wechat/index/js/detail.js?v={$v}'></script>
<script type='text/javascript' src='__ROOT__/addons/groupon/view/wechat/index/js/time.js?v={$v}'></script>
<script src="__STATIC__/plugins/photoswipe/photoswipe.min.js"></script>
<script src="__STATIC__/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
{if(!empty($datawx))}
<script src="{:request()->scheme()}://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
    debug: false,
    appId: '<?php echo WSTConf('CONF.wxAppId'); ?>', //公众号的唯一标识
    timestamp: '<?php echo $datawx['timestamp'];?>', //生成签名的时间戳
    nonceStr: '<?php echo $datawx['noncestr'];?>', //生成签名的随机串
    signature: '<?php echo $datawx['signature'];?>',//签名
    jsApiList: [ //需要使用的JS接口
       	'onMenuShareTimeline',
		'onMenuShareAppMessage',
		'onMenuShareQQ',
		'onMenuShareWeibo',
		'onMenuShareQZone'
    ]
});

wx.ready(function(){
	var shareData = {
			title: '{$shareInfo["title"]}',
			desc: '{$shareInfo["desc"]}',
			link: '{$shareInfo["link"]}',
			imgUrl: '{$shareInfo["imgUrl"]}'
	};
	wx.onMenuShareAppMessage(shareData);
	wx.onMenuShareTimeline(shareData);
	wx.onMenuShareQQ(shareData);
	wx.onMenuShareWeibo(shareData);
	wx.onMenuShareQZone(shareData);

	{if $info['goodsVideo']!=""}
	var width = $(document).width();
	var u = navigator.userAgent;
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
	var player = new Aliplayer({
	  "id": "previewVideo",
	  "source": "__RESOURCE_PATH__/{$info['goodsVideo']}",
	  "cover":"__RESOURCE_PATH__/{$info['goodsImg']}",
	  "width": "100%", 
	  "height": width+"px",
	  "autoplay": isiOS?true:false,
	  "isLive": false,
	  "rePlay": false,
	  "playsinline": true,
	  "preload": true,
	  "controlBarVisibility": "hover",
	  "useH5Prism": true
	});
	{/if}
});
</script>
{/if}
{/block}